import { Tooltip } from 'antd'
import { Queue } from '@/lib/queue'

const queue = new Queue(25)

export function useLazyInit() {
  const [inited, setInited] = useState(false)

  useEffect(() => {
    let leave = false
    queue.push(() => {
      if (!leave) setInited(true)
    })
    return () => {
      leave = true
    }
  }, [])

  return inited
}

/**
 * 对于渲染性能不好的组件，延迟、分批初始化来避免卡顿
 */
export function Lazy({ children }: { children: React.ReactNode }) {
  const inited = useLazyInit()
  return inited ? children : null
}

/**
 * 解决 Tooltip 大批量渲染时的性能问题。
 * Tooltip 的渲染性能不好不代表其 chldren 的渲染性能，因此不适合直接包裹 <Lazy>。
 */
export function LazyTooltip({ children, ...rest }: Parameters<typeof Tooltip>[0]) {
  const inited = useLazyInit()
  return inited ? <Tooltip {...rest}>{children}</Tooltip> : children
}

/**
 * 对于不需要立刻显示内容的图片，一方面延迟渲染，顺便也让图片内容延迟加载
 */
export function LazyImage(
  props: React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>,
) {
  return <Lazy>
    <img loading="lazy" {...props} />
  </Lazy>
}
